<template>
	<view class="use-box-model">
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="title-box">
					<view class="">

					</view>
					<view class="title">
						核销
					</view>
					<view class="lg text-gray cuIcon-close icon-close-box" @click="close">

					</view>
				</view>
				<view class="form-box">
					
					<view class="form-item">
						<view class="input-box">
							<picker @change="bindPickerChange" :value="index" range-key="name" mode="selector" :range="petList" >
								<view :style="index<0?'color:#7d7d7d':''" class="input flex align-center justify-between">
									{{index>=0?petList[index].name:'选择宠物(必选)'}}
									<i class="lg text-gray cuIcon-right"></i>
								</view>
							</picker>

						</view>
					</view>
					<view v-if="index>=0" class="form-item">
						<view class="input-box">
							<input v-model="form.telphone" disabled class="input" type="number" maxlength="11" placeholder="输入宠物主手机号(必填)" />
						</view>
					</view>
					<view class="form-item">
						<view class="input-box">
							<input v-model="form.employName" class="input" type="text" maxlength="15" placeholder="输入核销人姓名(必填)" />
						</view>
					</view>
					<view class="form-item">
						<view class="input-box">
							<input v-model="form.employTel" class="input" type="number" maxlength="11" placeholder="输入核销人手机号(必填)" />
						</view>
					</view>

				</view>
				<view class="bottom-box">
					<view class="num-box">
						核销后剩余次数：<text class="num">{{item.unusedNum}}次</text>
					</view>

					<view class="bottom-btn" @click="submit">
						确定
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCargoList
	} from "@/api/pet/binding/index.js"
	import {
		checkService
	} from "@/api/pet/service/saler.js"
	import regRule from '@/common/rules'
	export default {
		data() {
			return {
				modalName: "",
				params: {},
				item:{},
				petList: [],
				index: -1,
				form:{},
				pet_team:{},
			}
		},
		created() {
			this.pet_team = uni.getStorageSync('pet_team')
		},
		methods: {
			toPage() {
				uni.navigateTo({
					url: "/pagesPet/pages/service/saler/grant/use-succeed"
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				this.form.telphone = this.petList[this.index].bindPhone
				this.form.cargoId = this.petList[this.index].id
				this.form.cargoName = this.petList[this.index].name
			},
			open(params) {
				this.reg()
				this.item = params.item
				this.params.success = params.success || null; //确认方法回调
				this.params.close = params.close || null; //取消方法回调
				this.modalName = 'bottomModal';
				this.getCargoList()
			},
			getCargoList(){
				getCargoList({teamId:this.pet_team.teamId}).then(res=>{
					this.petList = res
				})
			},
			close() {
				this.modalName = '';
			},
			handleClose() {
				if (this.params.close) {
					this.params.close()
				}
				this.close()
			},
			
			reg(){
				var user = uni.getStorageSync("user")
				this.form = {
					employName:user.realName,
					employTel:user.telphone,
					telphone:'',
					cargoId:'',
					cargoName:'',
				}
				this.index = -1
			},
			submit(){
				if(this.index<0){
					return uni.showToast({
						title:'请选择宠物',
						icon:'none'
					})
				}
				if(!this.form.employName){
					return uni.showToast({
						title:'请输入核销人姓名',
						icon:'none'
					})
				}
				if(!this.form.employTel){
					return uni.showToast({
						title:'请输入核销人手机号',
						icon:'none'
					})
				}
				if (!regRule.phone.test(this.form.employTel)){
					return uni.showToast({
						title:'核销人手机号不正确',
						icon:'none'
					})
				}
				let obj = {
					...this.form,
					serveId:this.item.id,
					serveTeamId:this.item.teamId,
					serveTeamName:this.item.teamName,
					serveName:this.item.name,
					issueId:this.item.issueId,
					unusedNum:this.item.unusedNum,
					employTeamId:this.pet_team.teamId,
				}
				if (this.params.success) {
					this.params.success(obj)
				}
				this.close()
			},
		}
	}
</script>




<style>
	.use-box-model .cu-dialog {
		width: 100%;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
</style>


<style lang="scss" scoped>
	.bottom-box{
		border-top: 1rpx solid #f8f8f8;
		.num-box{
			padding-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--h1Color);
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
			.num{
				color: #FF9002;
			}
		}
	}
	.use-box-model {
		.cu-dialog {
			padding: 32rpx;
		}

		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color:  var(--h1Color);
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.icon-close-box {
				font-size: 40rpx;
				color: var(--h4Color);
			}
		}

		.bottom-btn {
			width: 100%;
			height: 96rpx;
			background: var(--primaryBg);
			border-radius: 48rpx;
			margin-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--btnColor);
			line-height: 45rpx;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;


		}

		.form-box {
			margin-top: 64rpx;

			.form-item {
				padding-bottom: 32rpx;

				.num {
					color: var(--primaryBg);
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
				}

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.input-box {
					margin-top: 24rpx;

					.input {
						padding: 0 28rpx;
						width: 686rpx;
						height: 90rpx;
						background: #F8F8F8;
						border-radius: 8rpx;

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}
</style>